<template>
    <nut-navbar @click-back="back" title="采购清单">
        <template #left>
            <RectLeft class="left" width="20px" height="20px" color="#1b1b1b"/>
        </template>
        <template #right>
            <span class="right" style="font-size: 18px; color: #78a0a4;">清空</span>
        </template>
    </nut-navbar>  
    <nut-tabs v-model="tabValue">
        <nut-tab-pane title="按菜谱" pane-key="0" >
            <div v-for="item in cookbook">
                <img :src="item.cook_book_image">
                <router-link :to="`/detail/${item.cook_book_id}`">{{ item.describe }}
                    <RectRight class="left" width="16px" height="16px" color="#1b1b1b"/>
                </router-link>
                <div class="content">
                    {{ item.material }}
                </div>
            </div>
        </nut-tab-pane>
        <nut-tab-pane title="全部" pane-key="1">全部</nut-tab-pane>
    </nut-tabs>
</template>

<script setup>
import { ref } from 'vue';
import { RectLeft, RectRight } from '@nutui/icons-vue';
import { useRouter } from 'vue-router';
import http from '../../tools/axios';

const router = useRouter()
const back = () => {
    router.push('/mobile/mine');
}
const tabValue = ref('0');
const cookbook = ref([])
const userId = localStorage.getItem('userId');
const getCookbook = async (cookbookId)=>{
    http.get('/cook/getbuy',{params: {'user_id': userId}}).then((res)=>{
        console.log(res);
        if(res.data.code === 200){
            cookbook.value = res.data.data;
            console.log(cookbook.value);
        }else{
            console.log('error');
            
        }
        
    })
}
getCookbook('2');
</script>

<style>
.nut-navbar {
    box-shadow: none;
    margin-top: 22px;
    margin-bottom: 10px;
}
.nut-navbar .title{
    font-size: 18px !important;
}
.nut-tabs{
    border-bottom: 1px solid #f7f7f7;
}
.nut-tabs__titles{
    background-color: #fff;
}
.nut-tabs__titles-item__text{
    font-size: 18px;
}
.nut-tabs__titles-item.active .nut-tabs__titles-item__line{
    background-color: #cdb165 !important;
}
img{
    width: 100%;
    height: 200px;
}
.router-link-active{
    color: #1b1b1b;
    text-decoration: none;
    font-size: 18px;
}
.content{
    margin: 20px 0;
}
</style>